<template>
  <div class="row flex-center q-pa-lg">
    <q-card class="q-pa-lg" style="max-width: 350px;">
      <div class="column flex-center  q-gutter-y-md">
        <!-- <SelectImage v-model="user.userInfo.avatar" file-type="image" /> -->
        <q-avatar size="150px">
          <img :src="user.显头像">
        </q-avatar>
        <q-list bordered separator class="fit">
          <q-item clickable v-ripple>
            <q-item-section>
              <div class="row">
                <q-toggle label="已充电:" left-label v-model="能量.单项.充电" color="green" disable/>
                <q-toggle label="高级VIP:" left-label v-model="能量.单项.更上层楼" color="green" disable/>
              </div>
              全部功能试用期: {{ util.fmt时间到天(能量.单项.到期时间) }}
            </q-item-section>
          </q-item>
          <q-item clickable v-ripple>
            <q-item-section avatar>
              <q-icon color="primary" name="person" />
            </q-item-section>
            <q-item-section>
              用户名:{{ user.userInfo.user_name }}
            </q-item-section>
          </q-item>
          <q-item clickable v-ripple>
            <q-item-section avatar>
              <q-icon color="primary" name="person" />
            </q-item-section>
            <q-item-section>
              <template v-if="!editFlag">
                昵称:{{ user.userInfo.nick_name }}
              </template>
              <el-input v-else v-model="nick_name" />
            </q-item-section>
            <q-item-section avatar>
              <q-btn v-if="!editFlag" dense flat color="primary" icon="edit" @click="openEdit" />
              <div v-else class="row no-wrap">
                <q-btn dense flat round color="primary" icon="check" @click="enterEdit" />
                <q-btn dense flat round color="negative" icon="clear" @click="closeEdit" />
              </div>
            </q-item-section>
          </q-item>
          <q-item clickable v-ripple>
            <q-item-section avatar>
              <q-icon color="primary" name="smartphone" />
            </q-item-section>
            <q-item-section>
              手机:{{ user.userInfo.mobile }}
            </q-item-section>
          </q-item>
          <q-item clickable v-ripple>
            <q-item-section avatar>
              <q-icon color="primary" name="lock" />
            </q-item-section>
            <q-item-section>
              <q-btn dense flat icon="edit" label="修改密码" @click="showPassword = true" />
            </q-item-section>
          </q-item>
          <q-item clickable v-ripple>
            <q-item-section>
              <!-- <q-btn dense flat icon="logout" label="查能量" @click="hook.查能量" /> -->
              <q-btn dense flat icon="logout" label="退出登录" @click="user.LoginOut" />
            </q-item-section>
          </q-item>
        </q-list>
      </div>
    </q-card>
  </div>
  <el-dialog v-model="showPassword" title="修改密码" width="360px" @close="clearPassword">
    <el-form ref="modifyPwdForm" :model="pwdModify" :rules="rules" label-width="80px">
      <el-form-item :minlength="6" label="原密码" prop="password">
        <el-input v-model="pwdModify.password" show-password />
      </el-form-item>
      <el-form-item :minlength="6" label="新密码" prop="newPassword">
        <el-input v-model="pwdModify.newPassword" show-password />
      </el-form-item>
      <el-form-item :minlength="6" label="确认密码" prop="confirmPassword">
        <el-input v-model="pwdModify.confirmPassword" show-password />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="showPassword = false">取 消</el-button>
        <el-button type="primary" @click="savePassword">确 定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { setSelfInfo, changePassword } from '@/amtf/api/user.js'
import { reactive, ref, watch } from 'vue'
import { useUserStore } from 'src/stores/use_user_store'
import use查能量 from '@/hooks/查能量';
import SelectImage from '@/components/selectImage/selectImage.vue'
import * as util from "@/amtf/utils"

defineOptions({
  name: 'user',
})

const activeName = ref('second')
const rules = reactive({
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, message: '最少6个字符', trigger: 'blur' },
  ],
  newPassword: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    { min: 6, message: '最少6个字符', trigger: 'blur' },
  ],
  confirmPassword: [
    { required: true, message: '请输入确认密码', trigger: 'blur' },
    { min: 6, message: '最少6个字符', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (value !== pwdModify.value.newPassword) {
          callback(new Error('两次密码不一致'))
        } else {
          callback()
        }
      },
      trigger: 'blur',
    },
  ],
})

const user = useUserStore()
const 能量 = use查能量()
const modifyPwdForm = ref(null)
const showPassword = ref(false)
const pwdModify = ref({})
const nick_name = ref('')
const editFlag = ref(false)
const savePassword = async () => {
  modifyPwdForm.value.validate((valid) => {
    if (valid) {
      changePassword({
        password: pwdModify.value.password,
        newPassword: pwdModify.value.newPassword,
      }).then((res) => {
        if (res.code === 0) {
          ElMessage.success('修改密码成功！')
        }
        showPassword.value = false
      })
    } else {
      return false
    }
  })
}

const clearPassword = () => {
  pwdModify.value = {
    password: '',
    newPassword: '',
    confirmPassword: '',
  }
  modifyPwdForm.value.clearValidate()
}

watch(() => user.userInfo.avatar, async (val) => {
  const res = await setSelfInfo({ avatar: val })
  if (res.code === 0) {
    user.ResetUserInfo({ avatar: val })
    ElMessage({
      type: 'success',
      message: '设置成功',
    })
  }
})

const openEdit = () => {
  nick_name.value = user.userInfo.nick_name
  editFlag.value = true
}

const closeEdit = () => {
  nick_name.value = ''
  editFlag.value = false
}

const enterEdit = async () => {
  const res = await setSelfInfo({
    nick_name: nick_name.value
  })
  if (res.code === 0) {
    user.ResetUserInfo({ nick_name: nick_name.value })
    ElMessage({
      type: 'success',
      message: '设置成功',
    })
  }
  nick_name.value = ''
  editFlag.value = false
}

const handleClick = (tab, event) => {
  console.log(tab, event)
}

const getCode = async () => {
  time.value = 60
  let timer = setInterval(() => {
    time.value--
    if (time.value <= 0) {
      clearInterval(timer)
      timer = null
    }
  }, 1000)
}

</script>
